<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>用户一览</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
              <div class="row align-items-center my-4">
                <div class="col">
                  <h2 class="h3 mb-0 page-title">用户</h2>
                </div>
                <div class="col-auto">
                  <a  onclick="getDelUsers()" type="button" class="btn btn-danger text-light"><span class="fe fe-trash fe-12 mr-2"></span>Delete</a>
                  <a href="/user/toAdd" type="button" class="btn btn-primary"><span class="fe fe-filter fe-12 mr-2"></span>Create</a>
                </div>
              </div>
              <!-- table -->
              <div class="card shadow">
                <div class="card-body">
                  <table class="table datatables" id="dataTable-1">
                    <thead>
                    <tr>
                      <th></th>
                      <th><strong>头像</strong></th>
                      <th><strong>用户名</strong></th>
                      <th><strong>余额</strong></th>
                      <th><strong>电话</strong></th>
                      <th><strong>性别</strong></th>
                      <th><strong>更新时间</strong></th>
                      <th><strong>角色</strong></th>
                      <th><strong>验证</strong></th>
                      <th><strong>操作</strong></th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:each="user:${users}">
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input name="sel" type="checkbox" class="custom-control-input" th:id="${user.id}">
                            <label class="custom-control-label" th:for="${user.id}"></label>
                          </div>
                        </td>
                        <td>
                          <div class="avatar avatar-sm">
                              <th:block th:if="${user.file!=null}">
                                  <img th:src="${user.file}" alt="..." class="avatar-img rounded-circle">
                              </th:block>
                              <th:block th:if="${user.file==null}">
                                  <img th:src="@{/dash/assets/avatars/face-1.jpg}" alt="..." class="avatar-img rounded-circle">
                              </th:block>
                          </div>
                        </td>
                        <td th:text="${user.username}">
<!--                          <p class="mb-0 text-muted"><strong th:text="${user.username}">Leblanc, Yoshio V.</strong></p>-->
<!--                          <small class="mb-0 text-dark" th:text="${user.id}">2786</small>-->
                        </td>
                        <td th:text="${user.balance}">
<!--                          <p class="mb-0 text-muted"><strong th:text="${user.balance}"></strong></p>-->
                          <!--                          <small class="mb-0 text-muted">287-8300 Nisl. St</small>-->
                        </td>
                        <td th:text="${user.phone}">
<!--                          <p class="mb-0 text-muted"><a href="#" class="text-dark" th:text="${user.phone}">-->
<!--                            (899) 881-3833</a></p>-->
                          <!--                          <small class="mb-0 text-muted">Papua New Guinea</small>-->
                        </td>
                        <td class="text-dark" th:text="${user.gender==1?'男':(user.gender==2?'女':'无')}">04/05/2019</td>
                        <td class="text-dark" th:text="${#temporals.format(user.updatedTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td class="text-dark" th:text="${user.roleId==1?'超管':(user.roleId>=11 and user.roleId<=16?'普通管理员':'一般用户')}">04/05/2019</td>
                        <td class="text-dark" th:text="${user.verified=='Y'?'已验证':'未验证'}">04/05/2019</td>
                        <td><button class="btn btn-sm dropdown-toggle more-horizontal" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="text-muted sr-only">Action</span>
                        </button>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" th:href="@{/user/detail(userId=${user.id})}">编辑详情</a>
                            <!--防止误删自己-->
                            <th:block th:if="${user.id} != ${session.user.id}">
                              <a class="dropdown-item" th:href="@{/user/del(userId=${user.id})}">删除</a>
                            </th:block>
                            <!--                            <a class="dropdown-item" href="#">Assign</a>-->
                          </div>
                        </td>
                      </tr>
                    </th:block>
                    </tbody>
                  </table>
                </div>
              </div>
            </div> <!-- .col-12 -->
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/daterangepicker.js}"></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src='@{/dash/js/jquery.dataTables.min.js}'></script>
    <script th:src='@{/dash/js/dataTables.bootstrap4.min.js}'></script>
    <script>
      $('#dataTable-1').DataTable(
              {
                autoWidth: true,
                "lengthMenu": [
                  [16, 32, 64, -1],
                  [16, 32, 64, "All"]
                ]
              });
    </script>
    <script>

      function getDelUsers(){
        const users = []
        console.log($("input:checkbox[name='sel']:checked"))
        $("input:checkbox[name='sel']:checked").each(function (index) {
          users[index] = $(this).attr('id')
        })
        console.log(users.toLocaleString())
          if (users.toLocaleString() == '') {
              alert('请先选择！')
              return false
          }
        $.post('/user/delete/'+users.toLocaleString(),function(data,status){
          // alert("Data: " + data + "nStatus: " + status);
          alert("Status: " + status);
          window.location.href = '/user/list'
        });
      }

    </script>
  </body>
</html>
